<%--
  Created by IntelliJ IDEA.
  User: huadongyu
  Date: 2025/10/13
  Time: 9:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>课程类别管理</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/back-index.css" />
  <script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap-mypaginator.js"></script>
  <script type="text/javascript" charset="utf-8">
    $(function(){
      const currentParentId = "${currentParentId}"; // 顶级为null，子类别页面有值
      const currentPageNo = "${typePage.pageNum==0?1:typePage.pageNum}"; // 处理页码为0的默认值
      const totalPages = ${typePage.pages==0?1:typePage.pages};
      
      // 修复分页插件初始化，确保正确处理分页参数
      if(totalPages > 0 && currentPageNo > 0) {
        $("#courseTypePageHelper").bootstrapPaginator({
          bootstrapMajorVersion:3,
          currentPage: parseInt(currentPageNo),
          totalPages: parseInt(totalPages),
          size:"normal",
          alignment: "center",
          pageUrl:function (type,page,current){
            if(currentParentId){
              // 子类别分页：调用子类别列表接口
              return "${pageContext.request.contextPath}/courseType/findChildByParentId?parentId="+currentParentId+"&pageNo="+page;
            }else{
              // 父类别分页：调用顶级列表接口
              return "${pageContext.request.contextPath}/courseType/findAll?pageNo="+page;
            }
          }
        });
      } else {
        // 避免分页插件因参数问题报错
        $("#courseTypePageHelper").html("<li class='disabled'><a href='#'>无数据</a></li>");
      }

      $("#doAddCourseType").on("click", function() {
        if(currentParentId){
          // 子类别页面：标题+显示父ID隐藏域
          $(".modal-title").html("添加子类别");
          $("#parentId-input").show();
          $("#courseType-parentId").val(currentParentId);
        }else{
          // 父类别页面：标题+隐藏父ID隐藏域
          $(".modal-title").html("添加类别");
          $("#parentId-input").hide();
        }
        $("#courseType-id-input").hide(); // 新增时隐藏ID输入框
        $("#errorMsg").html(""); // 清空之前的错误提示
        $("#courseTypeModal").modal("show");
      });

      $(".courseType-btn").on("click", function() {
        const modalTitle = $(".modal-title").text().trim();
        const typeName = $("#courseType-name").val().trim();
        const errorDom = $("#errorMsg");

        // 基础验证：类别名称不能为空（补充第一个文件的验证逻辑）
        if(!typeName){
          errorDom.html("类别名称不能为空！");
          return;
        }

        if (modalTitle === "修改类别") {
          $.ajax({
            type: "post",
            url: "${pageContext.request.contextPath}/courseType/modifyCourseType", // 保留自身修改接口
            data: {
              "id": $("#courseType-id").val(),
              "typeName": typeName
            },
            dataType: "json",
            success: function(result) {
              if(result.responseCode=="2001"){
                // 修改成功：返回当前层级页面
                if(currentParentId){
                  location.href = "${pageContext.request.contextPath}/courseType/findChildByParentId?parentId="+currentParentId+"&pageNo="+currentPageNo;
                }else{
                  location.href = "${pageContext.request.contextPath}/courseType/findAll?pageNo="+currentPageNo;
                }
              } else {
                errorDom.html("修改失败：" + (result.message || "未知错误"));
              }
            }
          });
        }

        else {
          if(modalTitle === "添加子类别"){
            // 子类别添加：传parentId
            $.ajax({
              type:"post",
              url:"${pageContext.request.contextPath}/courseType/addChildType", // 新增子类别接口（需后端配合）
              data:{
                "name": typeName,
                "parentId": currentParentId
              },
              dataType:"json",
              success:function (result){
                if(result.responseCode=="2001"){
                  location.href = "${pageContext.request.contextPath}/courseType/findChildByParentId?parentId="+currentParentId+"&pageNo="+currentPageNo;
                }else{
                  errorDom.html("添加失败：" + (result.message || "未知错误"));
                }
              }
            });
          }else{
            // 父类别添加：不传parentId
            $.ajax({
              type:"post",
              url:"${pageContext.request.contextPath}/courseType/addType", // 保留自身添加接口
              data:{"name": typeName},
              dataType:"json",
              success:function (result){
                if(result.responseCode=="2001"){
                  location.href="${pageContext.request.contextPath}/courseType/findAll?pageNo="+currentPageNo;
                }else{
                  errorDom.html("添加失败：" + (result.message || "未知错误"));
                }
              }
            });
          }
        }
        // 关闭模态框（保留第二个文件原逻辑）
        $("#courseTypeModal").modal("hide");
      });

      $(".courseType-modify").on("click", function() {
        $(".modal-title").html("修改类别");
        $("#courseType-id-input").show(); // 显示ID输入框
        $("#parentId-input").hide(); // 修改时隐藏父ID
        $("#errorMsg").html(""); // 清空错误提示
        $("#courseTypeModal").modal("show");

        $.ajax({
          type:"post",
          url: "${pageContext.request.contextPath}/courseType/findById",
          data: {"id":$(this).attr("data-id")},
          dataType: "json",
          success:function (result){
            if(result.responseCode=="2001"){
              $("#courseType-id").val(result.returnObject.id);
              $("#courseType-name").val(result.returnObject.typeName);
            }else{
              $("#errorMsg").html("数据查询失败：" + (result.message || "未知错误"));
            }
          }
        });
      });

      $("input[name='modifyStatus']").click(function (){
        const btn = $(this);
        const status = btn.attr("data-status");
        const isParentDisabled = "${currentParentId != null && parentCourse.status == 1}"; // 父类别禁用标记
        const errorDom = $("#errorMsg");

        // 父类别禁用时，不允许启用子类别（补充第一个文件的限制逻辑）
        if (isParentDisabled === "true" && status === "1") {
          errorDom.html("父课程已禁用，无法启用子课程！");
          return false;
        }

        // 调用状态修改接口（保留自身接口）
        $.ajax({
          type:"post",
          url:"${pageContext.request.contextPath}/courseType/modifyStatus",
          data:{
            "id":btn.attr("data-id"),
            "status":status
          },
          dataType: "json",
          success: function(result) {
            if(result.responseCode=="2001"){
              // 刷新当前层级页面
              if(currentParentId){
                location.href = "${pageContext.request.contextPath}/courseType/findChildByParentId?parentId="+currentParentId+"&pageNo="+currentPageNo;
              }else{
                location.href = "${pageContext.request.contextPath}/courseType/findAll?pageNo="+currentPageNo;
              }

              // 父类别状态变更时，刷新子框架（对齐第一个文件的联动逻辑）
              if(!currentParentId && window.parent && window.parent.frames){
                const frame = window.parent.document.getElementById("frame-id");
                if(frame && frame.contentWindow){
                  frame.contentWindow.location.reload();
                }
              }
            } else {
              errorDom.html("修改状态失败：" + (result.message || "未知错误"));
            }
          }
        });
      });

      // 修复查询子类别按钮的点击事件处理
      $(document).on("click", ".course-type-detail", function() {
        const childParentId = $(this).attr("data-id"); // 当前类别的ID作为子类别的父ID
        
        // 直接在当前窗口跳转，确保页面能正确刷新标题和内容
        location.href = "${pageContext.request.contextPath}/courseType/findChildByParentId?parentId="+childParentId+"&pageNo=1";
      });

      $("#back").on("click", function() {
        const parentCourseId = "${parentCourse.parentId}"; // 当前父类别的上级ID
        if(parentCourseId){
          // 有上级：返回上级类别列表
          location.href = "${pageContext.request.contextPath}/courseType/findChildByParentId?parentId="+parentCourseId+"&pageNo=1";
        }else{
          // 无上级：返回顶级类别列表
          location.href = "${pageContext.request.contextPath}/courseType/findAll?pageNo=1";
        }
      });

      $("body").append('<input type="hidden" id="courseType-parentId" value="'+currentParentId+'" style="display:none;">');

      // 取消按钮：清空输入框（补充优化）
      $(".cancel").on("click", function(){
        $("#courseType-name").val("");
        $("#errorMsg").html("");
      });
    });
  </script>
</head>

<body>

<!-- 课程类别管理 -->
<div class="panel panel-default" id="departmentSet">
  <div class="panel-heading">
    <h3 class="panel-title">
      <c:choose>
        <c:when test="${not empty currentParentId and not empty parentCourse}">
          ${parentCourse.typeName}的子类别管理
        </c:when>
        <c:otherwise>
          课程类别管理
        </c:otherwise>
      </c:choose>
      &nbsp;&nbsp;<span id="errorMsg" style="color: red;"></span>
    </h3>
  </div>
  <div class="panel-body">
    <input type="button" value="添加课程类别" class="btn btn-primary" id="doAddCourseType" />
    <c:if test="${currentParentId != null}">
      <input type="button" value="返回上级列表" class="btn btn-success" id="back" style="float: right;" />
    </c:if>
    <br><br>

    <!-- 模态框：添加/修改类别（对齐第一个文件，新增父ID隐藏域） -->
    <div class="modal fade" tabindex="-1" id="courseTypeModal">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">添加类别</h4>
          </div>
          <div class="modal-body text-center">
            <!-- ID输入框：修改时显示，新增时隐藏 -->
            <div class="row text-right" id="courseType-id-input" >
              <label for="courseType-id" class="col-sm-4 control-label">编号：</label>
              <div class="col-sm-4">
                <input type="text" class="form-control" id="courseType-id" readonly="true" />
              </div>
            </div>
            <br>
            <!-- 类别名称：必输项 -->
            <div class="row text-right">
              <label for="courseType-name" class="col-sm-4 control-label">类别名称：</label>
              <div class="col-sm-4">
                <input type="text" class="form-control" id="courseType-name" />
              </div>
            </div>
            <br>
            <!-- 父ID隐藏域：子类别添加时使用（默认隐藏） -->
            <div class="row text-right" id="parentId-input" style="display: none;">
              <label for="courseType-parentId" class="col-sm-4 control-label">父类别ID：</label>
              <div class="col-sm-4">
                <input type="text" class="form-control" id="courseType-parentId" readonly="true" />
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary courseType-btn">确定</button>
            <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 类别列表：对齐第一个文件的状态显示+按钮控制逻辑 -->
    <div class="show-list">
      <table class="table table-bordered table-hover" style='text-align: center;'>
        <thead>
        <tr class="text-danger">
          <th class="text-center">编号</th>
          <th class="text-center">名称</th>
          <th class="text-center">状态</th>
          <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody id="tb">
        <c:forEach items="${typePage.list}" var="type">
          <tr>
            <td>${type.id}</td>
            <td>${type.typeName}</td>
            <td>
              <c:if test="${currentParentId != null && parentCourse.status == 1}">禁用</c:if>
              <c:if test="${currentParentId == null || parentCourse.status == 0}">
                <c:if test="${type.status==1}">启用</c:if>
                <c:if test="${type.status==0}">禁用</c:if>
              </c:if>
            </td>
            <td>
              <input type="button" class="btn btn-warning btn-sm courseType-modify" data-id="${type.id}" value="修改"
                     <c:if test="${currentParentId != null && parentCourse.status == 1}">disabled="disabled" title="父课程已禁用，无法操作"</c:if>/>
              <!-- 启用/禁用按钮：按父类别状态+自身状态控制 -->
              <c:if test="${currentParentId != null && parentCourse.status == 1}">
                <!-- 父禁用：子类别强制显示禁用按钮（不可点击） -->
                <input type="button" class="btn btn-danger btn-sm" name="modifyStatus"
                       data-id="${type.id}" data-status="0" value="禁用"
                       disabled="disabled" title="父课程已禁用，子类自动禁用"/>
              </c:if>
              <c:if test="${currentParentId == null || parentCourse.status == 0}">
                <!-- 父正常：按自身状态显示按钮 -->
                <c:if test="${type.status == 0}">
                  <input type="button" class="btn btn-success btn-sm" name="modifyStatus"
                         data-id="${type.id}" data-status="${type.status}" value="启用"/>
                </c:if>
                <c:if test="${type.status == 1}">
                  <input type="button" class="btn btn-danger btn-sm" name="modifyStatus"
                         data-id="${type.id}" data-status="${type.status}" value="禁用"/>
                </c:if>
              </c:if>
              <!-- 查询子类别按钮：父禁用时不可点击 -->
              <input type="button" class="btn btn-success btn-sm course-type-detail" data-id="${type.id}" value="查询子类别"
                     <c:if test="${currentParentId != null && parentCourse.status == 1}">disabled="disabled" title="父课程已禁用，无法操作"</c:if>/>
            </td>
          </tr>
        </c:forEach>
        </tbody>
      </table>
      <ul id="courseTypePageHelper"></ul>
    </div>
  </div>
</div>
</body>
</html>